<script setup lang="ts">
interface CvssData {
    accessComplexity: String,
    accessVector: String,
    authentication: String,
    availabilityImpact: String,
    baseScore: Number,
    baseSeverity: String,
    confidentialityImpact: String,
    integrityImpact: String,
    vectorString: String,
    version: String,
    privilegesRequired: String,
    scope: String,
    userInteraction: String
}

interface CvssMetricV2 {
    acInsufInfo: Boolean,
    baseSeverity: String,
    cvssData: CvssData,
    exploitabilityScore: Number,
    impactScore: Number,
    obtainAllPrivilege: Boolean,
    obtainOtherPrivilege: Boolean,
    obtainUserPrivilege: Boolean,
    source: String,
    type: String,
    userInteractionRequired: Boolean
}

interface CvssMetricV31 {
    cvssData: CvssData,
    exploitabilityScore: Number,
    impactScore: Number,
    source: String,
    type: String
}

interface Reference {
    source: String,
    tags: Array<String>,
    url: String
}

interface Description {
    lang: String,
    value: String
}

interface Weakness {
    description: Array<Description>,
    source: String,
    type: String
}

interface Vulnerability {
    id: String,
    descriptions: Array<Description>,
    lastModified: String,
    metrics: {
        cvssMetricV2: Array<CvssMetricV2>,
        cvssMetricV31: Array<CvssMetricV31>
    },
    published: String,
    references: Array<Reference>,
    sourceIdentifier: String,
    weaknesses: Array<Weakness>
}

interface MyData {
    risk_level: String,
    cve_id: String,
    vulnerability: Vulnerability
}

const data: MyData = reactive({})
onMounted(async () => {
    const param = getQueryParam();
    data.risk_level = param.riskLevel
    data.cve_id = param.cveId
    const res = await getVulnerability({'cveId': param.cveId})
    data.vulnerability = res.vulnerabilities[0].cve
    console.log(data)
})
</script>

<template>
    <el-row :gutter="12">
        <el-col :span="18">
            <el-card shadow="never">
                <template #header>
                    <el-tag v-if="data.risk_level==='CRITICAL'" color="#8B0000" effect="light">严重</el-tag>
                    <el-tag v-else-if="data.risk_level==='HIGH'" color="#FF0000" effect="light">高风险</el-tag>
                    <el-tag v-else-if="data.risk_level==='MEDIUM'" color="#FFA500" effect="light">中风险</el-tag>
                    <el-tag v-else-if="data.risk_level==='LOW'" color="#008080" effect="light">低风险</el-tag>
                    <span style="margin-left: 2%;">{{data.cve_id}}</span>
                </template>
                <el-descriptions  direction="vertical" :column="1">
                    <el-descriptions-item label="描述">{{data.vulnerability?data.vulnerability.descriptions[0].value:''}}</el-descriptions-item>
                    <el-descriptions-item label="引用">
                        <div v-if="data.vulnerability">
                            <li v-for="item in  data.vulnerability.references" :key="item"><a>{{item.url}}</a></li>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
        <el-col :span="6">
            <div v-if="data.vulnerability">
                <el-card v-if="data.vulnerability.metrics.cvssMetricV31" shadow="never">
                    <template #header>
                        <span>cvss V31</span>
                    </template>
                    <el-descriptions :column="1">
                        <el-descriptions-item label="cvssV31 baseSeverity">{{data.vulnerability.metrics.cvssMetricV31[0].cvssData.baseSeverity}}</el-descriptions-item>
                        <el-descriptions-item label="cvssV31 baseScore">{{data.vulnerability.metrics.cvssMetricV31[0].cvssData.baseScore}}</el-descriptions-item>
                        <el-descriptions-item label="cvssV31 vectorString">{{data.vulnerability.metrics.cvssMetricV31[0].cvssData.vectorString}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-card v-if="data.vulnerability.metrics.cvssMetricV2"  shadow="never">
                    <template #header>
                        <span>cvss V2</span>
                    </template>
                    <el-descriptions :column="1">
                        <el-descriptions-item label="cvssV2 baseSeverity">{{data.vulnerability.metrics.cvssMetricV2[0].baseSeverity}}</el-descriptions-item>
                        <el-descriptions-item label="cvssV2 baseScore">{{data.vulnerability.metrics.cvssMetricV2[0].cvssData.baseScore}}</el-descriptions-item>
                        <el-descriptions-item label="cvssV2 vectorString">{{data.vulnerability.metrics.cvssMetricV2[0].cvssData.vectorString}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-card  shadow="never">
                    <template #header>
                        <span>Other Info</span>
                    </template>
                    <el-descriptions :column="1">
                        <el-descriptions-item label="published">{{data.vulnerability.published}}</el-descriptions-item>
                        <el-descriptions-item label="lastModified">{{data.vulnerability.lastModified}}</el-descriptions-item>
                        <el-descriptions-item label="weakness">
                            <div v-for="item in data.vulnerability.weaknesses" :key="item">
                                <li v-for="des in item.description" :key="des">{{des.value}}</li>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<style scoped lang="scss">

</style>